<template>
	<view>
		
		<view class="myService">
			<uni-nav-bar left-icon="back" :title="msgDict.aftersalesDetail" @clickLeft="gotoBack" :border="false" color="#fff" rightIcon="headphones" right-text="客服"  backgroundColor="transparent"></uni-nav-bar>
			<view class="service">
				<view class="topV">
					<view class="service-title">{{msgDict.orderInfo}}</view>
					<!-- <view class="status">{{goodsInfo.status}}</view> -->
				</view>
				<view class="service-menu">
					<view class="item">
						<view class="labCode">{{msgDict.orderNumber}}</view>
						<view class="labTime">{{goodsInfo.orderCode}}</view>
					</view>
					<view class="item">
						<view class="labCode">{{msgDict.aftersalesCode}}</view>
						<view class="labTime">{{goodsInfo.applyCode}}</view>
					</view>
					<view class="item">
						<view class="labCode">{{msgDict.applyTime}}</view>
						<view class="labTime">{{goodsInfo.applyTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods">
			<view class="goodsInfo">
				<view class="goodSubject">{{msgDict.goodsInfo}}</view>
				<view class="orderGoods">
					<view class="box-thumbnail">
						<image :src="goodsInfo.pic" mode="aspectFill"></image>
					</view>
					<view class="box-info">
						<view class="box-info__top">
							<view class="box-info__title">
								{{goodsInfo.beforeGoodsName}}
							</view>
							<view class="box-info__total_amount">
								￥{{goodsInfo.beforeGoodsPrice}}
							</view>
						</view>
						<view class="box-info__bottom">
							<view class="box-info__status">{{msgDict.szie}}:{{goodsInfo.beforeGoodsSize}}</view>
							<view class="box-info__Num">{{msgDict.applyNum}}:{{goodsInfo.num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="reasons">
			<view class="common">
				<!-- 1退货  2换货 -->
				<view class="text1" v-if="goodsInfo.type == 1">{{msgDict.returnGoods}}</view>
				<view class="text1" v-else>{{msgDict.exchangeGoods}}</view>
				<view class="backReason">{{goodsInfo.reasonTypeName}}</view>	
				<!-- </view> -->
			</view>
			
			<view class="reason" v-if="goodsInfo.type == 1">
				{{msgDict.returnGoodsDetail }}:{{goodsInfoDetail.reasonMarks}}
			</view>
			<view class="reason" v-else>
				{{msgDict.exchangeGoodsDetail }}:{{goodsInfoDetail.reasonMarks}}
			</view>
			<view class="subContent">
				<view class="imgGroup" v-for="(item,index2) in goodsInfoDetail.uploadGoodsPics" :key="index2" @click="btnShowImgClick(index2)">
					<image :src="item" mode="widthFix"  ></image>
				</view>	
			</view>
		</view>
		<view class="reasons">
			<view class="common">
				<view class="text1">{{msgDict.returnMode}}</view>
				<view class="reasonChoose ">自寄</view>
			</view>
			<view class="common commonBorder">
				<view class="chooseColor">{{msgDict.mailingAddress}}:</view>
				<view class="reasonChoose">
					{{goodsInfoDetail.hflAddress}}
				</view> 
			</view>
			<view class="common">
				<view class="chooseColor">{{msgDict.expressCode}}:</view>
				<view class="reasonChoose">
					{{goodsInfoDetail.expressCode}}
				</view> 
			</view>
		</view>
		<view class="btnGroup" v-if="goodsInfo.status == '审核中'">
			<view class="btn" @click="btnAddAddr">
			    {{msgDict.withdraw}}
			</view>
		</view>
	</view>
</template>

<script>
	import {cancelApply,queryAddr,applyAfterSale,viewApply} from '../../api/index.js'
	export default {
		data() {
			return {
				
				showLeaflet:true,
				appSchoolId:'',
				goodsInfo:{},
				goodsInfoDetail:{},
				canBtn:false,
				orderCode:'',
				userId:undefined,
				returnMoney	:'',
				msgDict:{}
				
			}
		},
		onLoad(option) {
			if (option.item) {
				
			 this.goodsInfo = JSON.parse(decodeURIComponent(option.item));
			// this.orderCode = option.orderCode
			}
			
			this.msgDict = getApp().globalData.$t('aftersales');
			
			this.userId=  getApp().globalData.userId
			this.appSchoolId = getApp().globalData.appSchoolId
			this.requstvViewApply();
			
			// this.requstSysDict();
			// this.requstbackWay();
			// this.requstQueryAddr();
			
			
		},
		
		filters:{
			showType(val){
				if(val == '1'){
					return '退货'
				}else{
					return '换货'
				}
				
			}
		},
		methods: {
			//换货原因
			async requstvViewApply(){
				
				let {result} = await viewApply({applyCode:this.goodsInfo.applyCode});
			    this.goodsInfoDetail = result;           
			
			},
			//取消申请
			async requstCancelApply(dict){
				
				let {result} = await cancelApply({userId:this.userId,reason:'嫌麻烦',applyCode:this.goodsInfo.applyCode});
			    uni.showToast({
			    	title:'取消成功',
			    	icon:'success'
			    },1500) 
			    setTimeout(()=>{
			    	
			    	let pages = getCurrentPages();
			    	let page = pages[pages.length - 2];
			    	page.$vm.requestListApplys();
			    	
			    	uni.navigateBack({
			    		delta: 1
			    	});
			    	
			    },1500)
			
			},
			showHiddenLeaflet(){
				setTimeout(()=>{
					this.showLeaflet = false
				},6000)
			},
			btnShowImgClick(index){
				uni.previewImage({
					current:index,
					urls:this.goodsInfoDetail.uploadGoodsPics
				})
			},
			gotoBack(){
			 uni.navigateBack({
			 	delta:1
			 })	
			},
			//提交
			btnAddAddr(){
				
				uni.showModal({
					title:'提示！',
					content:'您确认取消该订单吗',
					success: (res) => {
						if (res.confirm) {
							
							this.requstCancelApply()
					
						}
					}
				})
				
				
			},
			
			//返回原因
			btnReasonClick(){
				
				this.CategoryIndex  = 1;
				this.CategoryData = this.ReasonArr;
				this.CategoryStrat = [0];
				
				this.$refs.popSzieData.open();
				
				
				
			},
			//返回模板
			btnbackClick(){
				this.CategoryIndex  = 2;
				this.CategoryData = this.backArr;
				this.CategoryStrat = [0];
				
				this.$refs.popSzieData.open();
			},
			btnSizeConfirmSex(){
				
				// debugger
				
				if (this.CategoryIndex == 1) {
					
					
					this.backReason = this.CategoryData[this.CategoryStrat[0]];
					
				} else{
					this.backWay = this.CategoryData[this.CategoryStrat[0]];
					
					
				}
				this.btnSizeCancerSex()
				
			},
			btnSizeCancerSex(){
				
				this.$refs.popSzieData.close();
				
			},
			bindSexChange(e){
				console.log('bindCategoryChange',e);
				this.CategoryStrat=e.detail.value;
				
			},
			bindSexStartChange(){
				console.log('321开始转动');
				this.canBtn = true
				
			},
			bindSexEndChange(){
				console.log('321结束转动');
				this.canBtn  =false
			},
			btnNeedDetClick(){
						  
						  
			  if (this.needNum  > 1) {
				this.needNum --;
	
			  }
			},
			btnNeedAddClick(){
				
				if (this.needNum <  this.goodsInfo.goodsNum) {
					
					this.needNum ++;

				}
				
			},
			resultUrl(e) {
				console.log('imageRes',e);
				//成功默认为0
				if (e.code == 0) {
					this.imgArray.push(e.message);
					console.log('imageList',this.imgArray)
				}
			},
			delImg(e) {
				
				this.imgArray.splice(e, 1) //为删除图片数组的下标
				console.log(this.imgArray)
			}
			
		}
	}
</script>

<style lang="less">
		
    page{
		
		height: 100%;
		background-color: #f2f2f2;
	}
	
	.leaflet{
		position: fixed;
		top: 0;
		left: 0;
		width: 690rpx;
		padding: 20rpx 30rpx;
		background-color: #40E0D0;
		color: #fff;
		font-size: 32rpx;
		line-height: 60rpx;
		.uni-icons{
			position: relative;
			top: 10rpx;
			padding-right: 10rpx;
		}
	}
	.myService{
		padding-top:  var(--status-bar-height);
		background: linear-gradient(180deg, #8250FD 0%, #5644E5 100%);
		height: 400rpx;
		// padding: 20rpx 20rpx 0;
		
		.service{
			
			background-color: #fff;
			border-radius: 20rpx;
			// padding-bottom: 10rpx;
			margin: 64rpx 20rpx 0;
			
			.topV{
				height: 88rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				// border-bottom: 1rpx dotted #ccc;
				.service-title{
					
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					// border-left: 10rpx solid #FFA500;
					padding-left: 10rpx;
					// height:52rpx;
				}
				.status{
					
					font-size: 26rpx;
					font-weight: 400;
					color: #FFD700;
					
				}
				
			}
			.service-menu{
				
				padding: 0 20rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #333;
				
			}
			.item{
				
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 85rpx;
				border-top: 1px solid #f2f2f2;
				
				.labCode{
					width: 180rpx;
					font-size: 26rpx;
					color: #999;
				}
				.labTime{
					font-size: 26rpx;
					color: #333;
				}
				
			}
		}
	}
	.goods{
		padding: 0 20rpx;
		margin-top: 115rpx;
	}
	.goodsInfo {
		
		
		background-color: #fff;
		border-radius: 20upx;
		.goodSubject{
			padding:20rpx 20rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			border-bottom: thin solid #f2f2f2;
		}
		.orderGoods {
			display: flex;
			flex-direction: row;
			margin-top: 30upx;
			margin-left: 40rpx;
			padding-bottom: 40rpx;
			padding-right: 20rpx;
			
		
			.box-thumbnail {
				width: 106upx;
				height: 106upx;
				margin-right: 20upx;
				box-shadow: 0upx 2upx 10upx 0upx #EEF0F4;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8px;
					border: 1rpx solid #f2f2f2;
				}
			}
		
			.box-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				
					
				.box-info__top{
					
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333333;
					font-size: 24upx;
					font-weight: 400;
					.box-info__title {
						

					}
					.box-info__total_amount {
						// font-weight: 500;
						white-space: nowrap;
						margin-left: 30rpx;
						color: #F54353;
					}
				}
				.box-info__bottom {
					// margin-top: 10upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24upx;
					color: #999;
					margin-top: 30rpx;
					
					.box-info__Num{
						font-size: 28rpx;
					}
					
				}
			}
		}

	}
	.reasons{
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0rpx 20rpx;
		.commonBorder{
			border-bottom: thin solid #f2f2f2;
			border-top: thin solid #f2f2f2;
		}
		.common {
			
			display: flex;
			flex-direction: row;
			// justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
		
			.reasonChoose {
				
				font-size: 26rpx;
				color: #333;
				font-weight: 400;
				margin-left: 50rpx;
				// display: flex;
				// align-items: center;
				// width: 450rpx;
				// height: 50rpx;
				// border: thin solid #ccc;
				// flex-direction: row-reverse;
				// padding: 8rpx;
				// border-radius: 10rpx;
				// justify-content: space-between;
				.backReason{
					margin-right: 10rpx;
					font-size:34upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333;
				}
			}
			.chooseColor{
				color: #999;
				font-weight: 400;
				font-size: 26rpx;
			}
			.text1 {

				font-size: 28upx;
				font-weight: 500;
				color: #333333;

			}
			.uni-input {
				text-align: right;
				font-size: 26upx;
				font-weight: 400;
				color: #999999;
		
			}
		}
		
		.reason{
			margin-top: 20rpx;
			padding: 10rpx;
			// border: thin solid #ccc;
			border-radius: 16rpx;
			height: 137rpx;
			background: #F9F9F9;
			color: #999999;
			textarea{
				width: 100%;
				height: 100%;
			}
		}
		.subContent{
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.imgGroup{
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				image{
					height: 100%;
					width: 100%;
				}
			}
		}
		.addressContent {
			
			margin-top: 20upx;
			padding-top: 20upx;
			padding-bottom: 20upx;
			padding-right: 20upx;       
			
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			                                                                                   
		
			.labTips{
				font-size: 26rpx;
				color: #999;
				font-weight: 400;
				margin: 20rpx 0;
			}
			.addressInfo {
			
				max-width:350upx ;
				font-size: 32upx;
				font-weight: 500;
				color: #000000;
			}	
		}
		.expressG{
			
			font-size: 40upx;
			font-weight: 400;
			color: #333333;
			margin-right: 10rpx;
			
		}
	}
	.btnGroup{
	
	   display: flex;
	   justify-content: flex-end;
	   margin-top: 20rpx;
	   background-color: #fff;
	   padding-top: 12rpx;
	   padding-bottom: 30upx;
	   padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));  
	   padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	   
	   .btn{
		   
		   width: 168upx;
		   height: 70upx;
		   border-radius:2upx;
		   border: thin solid #F0F0F0;
		   font-size: 28upx;
		   color: #333;
		   line-height: 70rpx;
		   text-align: center;
		   margin-right: 20upx;
	   }
	}
	.categoryContent{
		width: 750upx;
		background-color: #fff;
		// padding-bottom: 40rpx;
		.pickerBtn{
			height: 101rpx;
			line-height: 101rpx;
			background-color: #fff;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: thin solid #ccc;
			padding: 0 20rpx;
			
			.popBnt{
				// width: 80upx;
				text-align: center;
			}
			.cancer {
				color: #888;
			}
			.confirm{
				color: #4CD964;
			}
		}
		.picker {
		  background-color: #fff;
		  width: 100%;
		  height: 370rpx;
		  }
		  .column {
			font-size: 40rpx;
			color: #000;
			text-align: center;
			line-height: 80rpx;
		  }
		  .indicator {
			  height: 80rpx;
			  border-top: thin solid #f2f2f2;
			  border-bottom:thin solid #f2f2f2;
		  }
		  .btnPopSizeGroup{
			  
			  bottom: 0rpx;
			  bottom: calc(0rpx + constant(safe-area-inset-bottom));  
			  bottom: calc(0rpx + env(safe-area-inset-bottom));
			  
			  .btnPopSize{
				  
				  color: #fff;
				  background-color: #FF1493;
				  height: 100rpx;
				  line-height:100rpx;
				  // border-radius: 10rpx;
				  font-size: 32rpx;
				  text-align: center;
				  
			  }
			  
		  }
		
	}
	
</style>
